<template>
  <view class="charging-rule-wait-page page-content">
    <z-paging ref="paging" v-model="currentList" @query="queryList" :auto="true" :refresher-enabled="true"
      :loading-more-enabled="true" empty-view-text="暂无数据">
      <template #top>
        <up-navbar title="市民信息" :autoBack="false" :fixed="true" bgColor="transparent" :border="false" placeholder
          @leftClick="handleBackClick">
          <template>
            <view></view>
          </template>
        </up-navbar>

        <up-sticky class="padding-20" bgColor="transparent">
          <!-- 筛选条件 -->
          <view class="filter-section">
            <!-- 搜索框 -->
            <view class="filter-item">
              <up-search v-model="searchForm.keyword" :clearabled="true" :showAction="true" 
                placeholder="请输入手机号或车牌号" @search="handleSearch" @clear="handleClear">
                <template #action>
                  <up-button type="primary" size="small" @click="handleSearch">搜索</up-button>
                </template>
              </up-search>
            </view>
          </view>
        </up-sticky>
      </template>

      <!-- 列表内容 -->
      <view class="charging-rule-wait-list">
        <view class="list-item-card" v-for="(item, index) in currentList" :key="index">
          <view class="card-header">
            <view class="title">
              车牌号：<text class="number">{{ item.plateNumber }}</text>
            </view>
          </view>
          <view class="card-content-box">
            <view class="content">
              <view class="item">
                <text class="label">手机号：</text>
                <text class="value">{{ item.phoneNumber }}</text>
              </view>
              <view class="item">
                <text class="label">绑定用户：</text>
                <text class="value">{{ item.userName }}</text>
              </view>
              <view class="item">
                <text class="label">注册时间：</text>
                <text class="value">{{ item.registerTime }}</text>
              </view>
            </view>
            <view class="card-footer">
              <view class="checkbox-box">
              </view>
              <view class="operate">
                <up-button type="primary" text="查看绑定车牌" class="custom-style" @click.stop="viewBindedPlates(item)"></up-button>
              </view>
            </view>
          </view>
        </view>
      </view>
    </z-paging>

    <!-- 已绑定车牌弹窗 -->
    <binded-plates-modal ref="bindedPlatesModal" v-model:show="showBindedPlatesModal" :platesList="selectedUserPlates" @close="handleBindedPlatesModalClose" />
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import BindedPlatesModal from './components/BindedPlatesModal.vue';



// 搜索表单
const searchForm = reactive({
  keyword: '', // 搜索关键词（手机号或车牌号）
});

// z-paging 组件引用
const paging = ref(null);

// 当前列表数据
const currentList = ref([]);

// 选中用户的绑定车牌
const selectedUserPlates = ref([]);

// 绑定车牌弹窗引用
const bindedPlatesModal = ref(null);
const showBindedPlatesModal = ref(false);



// 处理搜索
const handleSearch = () => {
  paging.value?.reload();
};

// 处理清除
const handleClear = () => {
  searchForm.keyword = '';
  paging.value?.reload();
};

// 处理返回点击事件
const handleBackClick = () => {
  uni.redirectTo({
    url: '/pages/home/index'
  });
};

// 查看已绑定车牌
const viewBindedPlates = (item) => {
  // 模拟获取用户绑定的车牌列表
  selectedUserPlates.value = generateMockPlates(item);
  showBindedPlatesModal.value = true;
};

// 处理绑定车牌弹窗关闭事件
const handleBindedPlatesModalClose = () => {
  console.log('绑定车牌弹窗已关闭');
};

// 生成模拟车牌数据
const generateMockPlates = (user) => {
  const count = Math.floor(Math.random() * 3) + 1; // 1-3个车牌
  return Array.from({ length: count }, (_, i) => ({
    plateNumber: `京${String.fromCharCode(65 + Math.floor(Math.random() * 26))}${Math.floor(Math.random() * 10000).toString().padStart(5, '0')}`,
    bindTime: `2023-${Math.floor(Math.random() * 12) + 1}-${Math.floor(Math.random() * 28) + 1} ${Math.floor(Math.random() * 24).toString().padStart(2, '0')}:${Math.floor(Math.random() * 60).toString().padStart(2, '0')}:${Math.floor(Math.random() * 60).toString().padStart(2, '0')}`,
  }));
};

// 查询列表数据
const queryList = async (pageNo, pageSize) => {
  try {
    // 处理搜索参数
    const params = {
      pageNo,
      pageSize,
      keyword: searchForm.keyword
    };
    
    // 模拟API调用
    // 实际项目中应替换为真实API
    // const result = await getCitizenInfoList(params);
    // const data = result.data;
    
    // 模拟数据
    const mockData = {
      total: 100,
      list: Array.from({ length: 10 }, (_, i) => ({
        id: `${pageNo}-${i}`,
        plateNumber: `京${String.fromCharCode(65 + Math.floor(Math.random() * 26))}${Math.floor(Math.random() * 10000).toString().padStart(5, '0')}`,
        phoneNumber: `1${Math.floor(Math.random() * 9) + 3}${Array.from({ length: 9 }, () => Math.floor(Math.random() * 10)).join('')}`,
        userName: `用户${Math.floor(Math.random() * 1000) + 1}`,
        registerTime: `2023-${Math.floor(Math.random() * 12) + 1}-${Math.floor(Math.random() * 28) + 1} ${Math.floor(Math.random() * 24).toString().padStart(2, '0')}:${Math.floor(Math.random() * 60).toString().padStart(2, '0')}`,
        status: Math.random() > 0.5 ? 1 : 2, // 1: 已认证, 2: 未认证
      }))
    };
    
    // 通知z-paging组件数据加载完成
    paging.value.complete(mockData.list);
  } catch (error) {
    console.error('获取市民信息列表数据失败:', error);
    paging.value.complete(false);
  }
};

onMounted(() => {
  // 初始化加载数据
  paging.value?.reload();
});
</script>

<style lang="scss" scoped>
.charging-rule-wait-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  
  .filter-section {
    margin-bottom: 10px;
    
    .filter-item {
      margin-bottom: 10px;
    }
  }
}

.charging-rule-wait-list {
  padding: 20px;
}

.search-bar {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
}


</style>